<template>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
        <el-form :model="form" ref="form" size="small" label-width="120px" :rules="rules">
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.School Name')" prop="schoolName">
                        <el-input v-model="form.schoolName" :placeholder="$locale('myClass.add.Please enter the school name')" :disabled="disabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.Login Account')" prop="userName">
                        <el-input v-model="form.userName" :placeholder="$locale('myClass.add.Please enter your login account')" :disabled="disabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.Login password')" prop="password">
                        <el-input v-model="form.password" :placeholder="$locale('classList.Please enter your login password')" :disabled="disabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.Maximum number of experiments')" prop="maxNumberExperiments">
                        <el-input-number v-model='form.maxNumberExperiments' :min="0" :placeholder="$locale('myClass.add.Please enter the maximum number of experiments')" style="width:100%" :disabled="disabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.Expiration date')" prop="updateTime">
                        <el-date-picker :disabled="disabled" v-model="form.updateTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$locale('myClass.add.Select date and time')" style="width:100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.contacts')" prop="contacts">
                        <el-input :disabled="disabled" v-model="form.contacts" :placeholder="$locale('myClass.add.Please enter the contact person')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.Contact Mobile')" prop="contactMobile">
                        <el-input :disabled="disabled" v-model="form.contactMobile" :placeholder="$locale('myClass.add.Please enter the contact person mobile phone number')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.Contact Email')" prop="contactEmail">
                        <el-input :disabled="disabled" v-model="form.contactEmail" :placeholder="$locale('myClass.add.Please enter the contact email address')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myClass.add.school address')" prop="schoolAddress">
                        <el-input :disabled="disabled" v-model="form.schoolAddress" :placeholder="$locale('myClass.add.Please enter the school address')" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('classList.add.notes')" prop="remark">
                        <el-input :disabled="disabled" type="textarea" :rows="3" :placeholder="$locale('classList.add.Please enter at least five characters')" v-model="form.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!disabled">
            <el-button type="primary" @click="submitForm">{{ $locale('classList.add.determine') }}</el-button>
            <el-button @click="cancel">{{ $locale('classList.add.Cancel') }}</el-button>
        </div>
    </el-dialog>
</template>

  <script>
import { add, edit, getById } from "@/api/myClass/classList";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "experimentAdd",
    dicts: ['experimental_status', 'difficulty_level', 'experiment_time', 'experiment_type', 'whether_not'],
    components: { Treeselect },
    data () {
        return {
            // 遮罩层
            loading: true,
            loadingRemote: false,
            // 弹出层标题
            title: "",
            disabled: false,
            // 是否显示弹出层
            open: false,
            // 总条数
            total: 0,
            // 表单参数
            form: {},
            formData: {
                checkList: [],
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deviceNameOrDeviceNum: undefined,
            },
            activeName: 'first',
            optionsList: [],
            options: [],
            listData: [],
            // 用户导入参数
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/system/user/importData"
            },
            // 表单校验
            rules: {
                schoolName: [
                    { required: true, message: this.$locale('jobList.add.School cannot be empty'), trigger: "blur" }
                ],
                userName: [
                    { required: true, message: this.$locale('jobList.add.Login account cannot be empty'), trigger: "blur" }
                ],
                password: [
                    { required: true, message: this.$locale('jobList.add.Password cannot be empty'), trigger: "blur" }
                ],
                maxNumberExperiments: [
                    { required: true, message: this.$locale('jobList.add.The maximum number of experiments cannot be empty'), trigger: "blur" }
                ],
                updateTime: [
                    { required: true, message: this.$locale('jobList.add.The expiration date cannot be empty'), trigger: "blur" }
                ],
                contacts: [
                    { required: true, message: this.$locale('jobList.add.Contact person cannot be empty'), trigger: "blur" }
                ],
                contactMobile: [
                    { required: true, message: this.$locale('jobList.add.Contact phone cannot be empty'), trigger: "blur" }
                ],
                contactEmail: [
                    { required: true, message: this.$locale('jobList.add.Contact email cannot be empty'), trigger: "blur" }
                ]
            }
        };
    },
    created () {
    },
    methods: {
        changeFileTeacher (fileList) {
            this.form.studentGuidebook = fileList
        },
        changeFileStudent () {
            this.form.teacherGuidebook = fileList
        },
        // 上传成功
        changeImage (fileList) {
            this.form.experimentPicture = fileList
        },
        // 表单重置
        reset () {
            this.form = {};
            this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd (form) {
            this.reset();
            this.open = true;
            this.title = this.$locale('classList.add.added');
        },
        /** 修改按钮操作 */
        handleUpdate (row, disabled) {
            this.disabled = disabled || false
            this.reset();
            getById({ id: row.id }).then(({ data }) => {
                this.form = data
                this.open = true;
                this.title = this.$locale('classList.add.modify');
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        edit(this.form).then(response => {
                            this.$modal.msgSuccess(this.$locale('geWudevice.add.tip5'));
                            this.open = false;
                            this.$emit('getList');
                        });
                    } else {
                        add(this.form).then(response => {
                            this.$modal.msgSuccess(this.$locale('geWudevice.add.tip6'));
                            this.open = false;
                            this.$emit('getList');
                        });
                    }
                }
            });
        },
        // 取消按钮
        cancel () {
            this.open = false;
            this.reset();
        },
        // // 文件上传中处理
        // handleFileUploadProgress (event, file, fileList) {
        //     this.upload.isUploading = true;
        // },
        // // 文件上传成功处理
        // handleFileSuccess (response, file, fileList) {
        //     this.upload.open = false;
        //     this.upload.isUploading = false;
        //     this.$refs.upload.clearFiles();
        //     this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
        //     this.getList();
        // },
        // // 提交上传文件
        // submitFileForm () {
        //     this.$refs.upload.submit();
        // }
    }
};
</script>

<style lang="scss" scoped>
.el-rate {
    line-height: 2;
}
</style>
